<html>
<head>

	<!-- Libs: Has to be first -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.color.js"></script>
	<script type="text/javascript" src="date.format.js"></script>
	<script type="text/javascript" src="pretty_date.js"></script>
	<script type="text/javascript" src="jquery.animateToClass.js"></script>
	<script type="text/javascript" src="jquery.hotkeys-0.7.9.min.js"></script>
	
	<!-- App logic -->
	<script type="text/javascript" src="todoit_utils.js"></script>
	<script type="text/javascript" src="todoit_core.js"></script>
	<script type="text/javascript" src="todoit_test.js"></script>
	<script type="text/javascript" src="tasks_gui.js"></script>
	<script type="text/javascript" src="jquery.autocomplete.min.js"></script>
	<script type="text/javascript" src="date.js"></script>
	<script type="text/javascript" src="datepicker.js"></script>
	<script type="text/javascript" src="tasks_edit.js"></script>
	<script type="text/javascript" src="ac_local.js"></script>
	<script type="text/javascript" src="cli.js"></script>
	<script type="text/javascript" src="todoit_main.js"></script>
	
	<!-- Some Style -->
 	<link rel="stylesheet" href="todoit_new_style.css" type="text/css" /> 
 	<link rel="stylesheet" href="todoit_add_box.css" type="text/css" /> 
	<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" /> 
	<link rel="stylesheet" href="datepicker.css" type="text/css" /> 
	<link rel="stylesheet" href="tasks_edit.css" type="text/css" /> 
	<link rel="stylesheet" href="cli.css" type="text/css" /> 

<script>
$(document).ready(function() {
    var addedTasks = [];
    var e = [];
    
    for(var i = 0; i < 8; i++)
		 gui_add_task(rand_task(true), false);

    
    gui_update_callback(addedTasks, e, e, e);
    
        
    initDetailsView();
    initCli();

    console.log("INIT");
});

</script>

	<style type="text/css">

#debugDiv {
	display: none; width: 95%; height: 120px; overflow: scroll;
}

/* max-height for tasks, scroll for more */
.tsk_list {
/* max-height: 600px; */ /* PROBABLYNOTATEMPFIX: Chrome + dynamic-height fails
	to measure scroll height. Better let Wave handle the blip height... */ 
	/* overflow: auto; */ /* THIS TOO */
	display: block !important; /* table style disables scrollbar */
}

/* TEMPFIX: */


/* animation styles must be here for animateToClassEx */
.tsk_row { /*display: table;*/
	
	background-color: rgb(252, 252, 252);
	color: #575757;
	border-color: #EEEEEE;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	text-align: left;
}

.tsk_row_hover {
	background-color: #E8EEF7 !important;
}

.tsk_row_selected {
	background-color: #E0E8A4;
	border-color:#CED697;
	border-top-width:1px;
	margin-top:-1px;
	padding-top:0;
}

.tsk_row_completed {
	background-color: #DDFACB;
	text-decoration: line-through;
}

.tsk_row_deleted {
	background-color: #FFBFBF;
}

.tsk_row_new {
	background-color: rgb(255, 255, 204);
}

.tsk_row_updated {
	background-color: rgb(255, 255, 204);
}
	</style>

</head>
<body onload="" onunload="">
<div id="container">
	<center>
	<div id="tdit" style="display: inline-block; width: 100%; max-width:900px;">
		<div id="commands" style="text-align: left; width: 100%;">
<!-- TEMPFIX:  selected_tasks=[] 3 times below to avoid complete/update wrong task -->
		
			<!-- <form action="#" style="text-align: center;" onsubmit="goCli(); return false;">
				<input class="inputtext" type="text" size="35" id="cli"
				  value="Task title !3 ^Today *after 2 days #Event @location =2 min" />
				<img id="cli-ichelp" alt="Help" 
				  src="http://todoit-wave.googlecode.com/svn/trunk/images/ichelp.png" />
				<input type="button" accesskey="s" value="Add Task" onclick="goCli();" />
			</form>
			<div class="hidden" id="cli-helptip">
				<div><span>Text-Add Shortcuts</span></div>
				<div><table>
					<tr><td>^</td><td>Due Date</td></tr>
					<tr><td>!</td><td>Priority</td></tr>
					<tr><td>#</td><td>Tags</td></tr>
					<tr><td>@</td><td>Location</td></tr>
					<tr><td>=</td><td>Duration</td></tr>
					<tr><td>*</td><td>Repeat</td></tr>
				</table></div>
				<div><a href="javascript:void(0)">Learn more</a></div>
			</div>
 -->
			
			
		</div>


		<div class="round_frame">
			<div class="round_frame_top">
				<div class="round_frame_t1 frameColor"></div>
				<div class="round_frame_t2 frameColor"></div>
			</div>
			<div class="rounded_frame_title">
				<span>
					<input type="button" onclick="moreActions('complete');" value="Complete" />
					<input type="button" onclick="moreActions('delete');" value="Delete" />
				</span>
				<span style="margin-right: 5px; text-align: right;" >
					<select id="more-actions" onchange="moreActions(this.value);" >
						<option value="---">More Actions...</option>
						<option value="show-active">Show Active</option>
						<option value="show-overdue">Show Overdue</option>
						<option value="show-completed">Show Completed</option>
						<option value="show-all">Show All</option>
						<option value="---" disabled="">--On Selected:</option>
						<option value="postpone">Postpone</option>
						<option value="call-dibs">Call Dibs</option>
						<option value="duplicate">Duplicate</option>
						<option value="delete">Delete</option>
						<option value="---" disabled="">---Prioritize:</option>
						<option value="prio-up">Prioritize Up</option>
						<option value="prio-down">Prioritize Down</option>
						<option value="prio1">Set Priority 1</option>
						<option value="prio2">Set Priority 2</option>
						<option value="prio3">Set Priority 3</option>
						<option value="prio4">Set Priority 4</option>
					</select>
					<select onchange="setSortMethod(this.value);">
						<option value="priority">Sort by Priority</option>
						<option value="name">Sort by Name</option>
						<option value="duedate">Sort by Due Date</option>
					</select>
				</span>
			</div>
			
			<div class="rounded_frame_body frameColor">
				<div id="searchAddCalBox">
					<div style="padding: 4px;">
						<form id="searchAddCalForm" action="" autocomplete="off">
							<div class="textbox-fill-wrapper">
								<div class="textbox-fill-mid">
									<input id="cli" class="textbox-fill-input label-input-label" value="Write a new task here..." onfocus="toggleAddBoxFocus(true);" onblur="toggleAddBoxFocus(false);"/>
								</div>
							</div>
						</form>
					</div>
					<div class="addTaskDetails hidden">
						<div class="prio_sel_box prio1 prio_sel_box_selected"></div>
						<div class="prio_sel_box prio2"></div>
						<div class="prio_sel_box prio3"></div>
						<div class="prio_sel_box prio4"></div>
					</div>
				</div>
				<div id="status_bar" onclick="showRecentDelta();">
					<span id="status_bar_text">Welcome! Start by adding a task in the text field above</span>
					<span class="status_bar_hover hidden">Click to display modified tasks</span>
				</div>
				<div id="tsk_list" class="tsk_list"></div>
			</div>
			<div class="round_frame_top">
				<div class="round_frame_t2 frameColor"></div>
				<div class="round_frame_t1 frameColor"></div>
			</div>
			
		</div>

		<div id="row_template" class="tsk_row hidden">
				<div class="cell_prio prio1">
					<div class="prio_arrow width5"></div>
				</div>
				<div>
					<span class="cell_cbox">
						<input class="cbox" type="checkbox" />
					</span>
						<img class="cell_icon" src="" alt=""/>
					<div class="cell_text">
						<span class="cell_title"></span>
						<span class="cell_edit_icon hidden">&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<div class="tsk_row_more">
							<span id="cell_date" class="cell_date">Today</span>
							<a class="cell_location" href="url_here" >Map</a>
							<a class="cell_link" href="url_here" target="_blank" >Follow link</a>
							<a class="cell_linkedWave" href="url_here" target="_top" >Related wave &gt;&gt;</a>
							<span class="cell_tags"> </span>
						</div>
					</div>
					
				</div>
				
				
			
		</div>
		
		<!-- TEMPFIX: INVISIBLE ROW - MAKE ROOM FOR ANIMATION -->
		<div style="height: 32px;">&nbsp;</div>
		<div style="height: 300px;">&nbsp;</div>
		
		<!-- TASK DETAILS TEMPLATE -->
		<div id="tsk_details_template" class="tsk_details hidden">
			<span title="Rename (r)" class="icon_lbl dtitle"><label>Title: </label><span class="field"></span><br /></span>
			
			
			<span title="Set Due Date (d)" class="ddue icon_lbl "><label>Due Date: </label><span class="field"></span> <a href="javascript:void(0)"><img src="./images/calendar_view_month.png" style="border-style:none;" /></a><br /></span>
			
			<span title="Set Tags (t)" class="dtags icon_lbl"><label>Tags: </label><span class="field"></span><br /></span>
			<span title="Set Frequency (f)" class="dfreq hidden icon_lbl "><label>Frequency: </label><span class="field"></span><br /></span>
			<span title="Set Duration (e)" class="icon_lbl ddur"><label>Duration: </label><span class="field"></span><br /></span>
			<span title="Set Location (l)" class="icon_lbl dlocation"><label>Location: </label><span class="field"></span> <a href="javascript:void(0)" title="Visit">Map</a><br /></span>
			<span title="Set Link (u)" class="icon_lbl dlink"><label>URL: </label><span class="field"></span> <a href="javascript:void(0)" title="Visit">Go</a><br /></span>
			<span title="Assign Owner (o)" class="icon_lbl downer hidden"><label>Owner: </label><span class="field"></span><br /></span>
			<span title="Set Progress (p)" class="icon_lbl dprogress hidden"><label>Progress: </label><span class="field"></span><br /></span>
			<span title="Set Status (s)" class="icon_lbl dstatus hidden"><label>Status: </label><span class="field"></span><br /></span>
			<span class="icon_lbl dcreated"><label>Created: </label><span class="data"></span><br /></span>
			<span class="icon_lbl dcompleted hidden"><label>Completed: </label><span class="data"></span><br /></span>
			<span class="icon_lbl dmodified"><label>Last Modified: </label><span class="data"></span><br /></span>
			<div class="tsk_details_buttons">
				<a href="javascript:void(0)" name="discuss">Discuss</a>
				<a href="javascript:void(0)" name="close">Close</a><br />
				<a href="javascript:void(0)" name="save">Save</a>
			</div>
		</div>
	</div>

	<div id="dialog" style="display:none" title="Welcome!">
		<p>How to use instructions...</p>
	</div>

	</center>
</div>
</body>
</html>
